<template>
  <div class="echarts-outer-wrapper flex-cloumn width-410">
    <Title title="入库排名TOP100" time="2" dw="单位：亿元"></Title>
    <vue-seamless-scroll
      :data="swiperList"
      :class-option="classOption"
      class="table-content"
    >
      <div class="scrollItem" v-for="(item, index) in swiperList" :key="index">
        <img
          src="~@/assets/images/icon-px-one.png"
          style="width: 21px; height: 17px"
          v-if="index === 0"
        />
        <img
          src="~@/assets/images/icon-px-two.png"
          style="width: 21px; height: 17px"
          v-if="index === 1"
        />
        <img
          src="~@/assets/images/icon-px-three.png"
          style="width: 21px; height: 17px"
          v-if="index === 2"
        />
        <div class="scrollIndex" style="width: 21px" v-if="index > 2">
          {{ index + 1 }}
        </div>
        <div class="scrollName" v-text="item.nsrmc"></div>
        <div class="scrollNumber" v-text="item.je"></div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import Title from "@/components/title";

export default {
  name: "sstjyx",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: "",
      yearDate: "",
      swiperList: [],
      classOption: {
        limitMoveNum: 1, // 开启无缝滚动的数据量
        singleHeight: 30,
        waitTime: 0,
        step: 0.5,
        hoverStop: true,
      },
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
    this.yearDate = year;
  },
  mounted() {
    this.ajax({
      url: "/dpzsSycxService/sstjyxQuery",
      method: "post",
      data: {
        param: {
          tjnd: this.yearDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.swiperList = res.data.tjList;
    });
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 458px;
  height: 314px;
}
.table-content {
  padding: 0 40px;
  flex: 0 0 256px;
  height: 256px;
  overflow: hidden;
  .scrollItem {
    display: flex;
    align-items: center;
    height: 28px;

    &:nth-child(2n + 1) {
      background: linear-gradient(
        to right,
        transparent,
        rgba(36, 121, 199, 0.5),
        transparent
      );
    }
    .scrollIndex {
      font-size: 10px;
      color: #e4cb2c;
      text-align: center;
    }
    .scrollName {
      padding: 0 12px;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-emphasis: ellipsis;
      font-size: 14px;
      color: #ffffff;
    }
    .scrollNumber {
      padding-right: 12px;
      font-size: 14px;
      color: #fbe671;
      width: 70px;
      overflow: hidden;
      text-align: right;
    }
  }
}
</style>
